<template>
    <div> 
      <div class="manage">
        <div class="manage-info">
            <span class="dish-info">{{topicTitle}}</span>
            
            <span class="dish-add" @click="dialogShowSmall"><img  src="./../../public/img/ic_add.png" alt="">新增分类</span>
        </div>
        <div class="manage-type" v-if="classificatList.length > 0">
            <div class="food-type" v-for="item in classificatList" :key="item.id" >
                <span class="foot-type-list">{{item.title}}</span>
                <img src="./../../public/img/ic_menuyellow.png" @click="dialogShowBig(item.id,item.title,item.sort,item.status)" alt="">
            </div>
        </div>
      </div>
      <!-- 添加/修改餐品分类对话框 -->
      <el-dialog :title="foodType==1?'添加餐品分类':'修改餐品分类'" top="35vh"  custom-class="dialog-show" :visible.sync="dialogMealproduct" style="border:1px solid green">
        <el-form :model="form" style="border-top:1px solid #D8D8D8;padding-top:15px">
          <el-form-item :label="foodType==1?'添加菜品分类':'餐品分类名称'" :label-width="formLabelWidth">
            <el-input style="width:280px;height:34px;" v-model="form.name" autocomplete="off" :placeholder="foodType==1?'点击输入菜品分类':''"></el-input>
          </el-form-item>
          <el-form-item label='是否上架' :label-width="formLabelWidth" >
            <el-radio v-model="form.putaway" label="2">上架</el-radio>
            <el-radio v-model="form.putaway" label="1">下架</el-radio>
          </el-form-item>
          <el-form-item label="排序" :label-width="formLabelWidth">
            <el-input style="width:280px;height:34px;" type='number' v-model="form.sort" autocomplete="off" placeholder="请输入位置排序"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" >
          <div class="btn-area">
            <div v-show="foodType==2" class="btn-delete make-sure"  @click="deleteDevide">删除</div>
            <div class="btn-sure make-sure"  @click="sureAddDevide">确 定</div>
          </div>
        </div>
      </el-dialog>
      <!-- 添加/修改餐桌分类对话框 -->
      <el-dialog :title="foodType==1?'添加餐桌分类':'修改餐桌分类'" top="35vh"  custom-class="dialog-show" :visible.sync="dialogMealdesk" style="border:1px solid green">
        <el-form :model="form" style="border-top:1px solid #D8D8D8;padding-top:15px">
          <el-form-item :label="foodType==1?'输入餐桌分类':'餐桌分类名称'" :label-width="formLabelWidth">
            <el-input style="width:280px;height:34px;" v-model="form.name" autocomplete="off" :placeholder="foodType==1?'点击输入餐桌分类':''"></el-input>
          </el-form-item>
          <el-form-item label="排序" :label-width="formLabelWidth">
            <el-input style="width:280px;height:34px;" type='number' v-model="form.sort" autocomplete="off" placeholder="请输入位置排序"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" >
          <div class="btn-area">
            <div v-show="foodType==2" class="btn-delete make-sure" @click="deleteDeskDevide">删除</div>
            <div class="btn-sure make-sure" @click="sureAddDeskDevide">确 定</div>
          </div>
        </div>
      </el-dialog>
    </div>
</template>
<script>
import api from './../../api/api';
import http from './../../config/index';
export default {
    data () {
        return {
          // modelType: 2,
          // 分类列表
          classificatList: [],
          // 餐品分类的id
          foodTypeId: '',
          // 餐桌分类的id
          deskTypeId: '',
          // 显示餐品的对话框
          dialogMealproduct: false,
          // 显示餐桌的对话框
          dialogMealdesk: false,
          width: '100%',
          form: {
            putaway:'2',
            // 餐品名称
            name: '',
            // 餐桌名称 因为对话框v-model只显示一个name所以不必做区分
            // deskName: '',
            sort:'',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
          },
          // 区分新增餐品(1)和修改餐品(2)
          foodType: 2,
          formLabelWidth: '120px',

        }
    },
    props: ['topicTitle','modelType'],
    methods: {
      // 获取分类商品组合接口
      getGoodsAllList(){
        var that = this;
        http.get(api.goodsAllList, {
          seller_id: localStorage.getItem("seller_id"),
          restaurant_id:this.$route.query.id
        }, (res) => {
          console.log(res);
          res.data.forEach(function (ele) {
            ele.num = 0;
            ele.goods.map(item => {
              item.num = 0;
            });
          })
          that.classificatList = res.data;
          that.passData(res.data);
        }, (err) => {
          console.log(err);
          
        }); 
      },
      // 获取餐桌分类列表
      getDeskAllList(){
        var that = this;
        http.get(api.deskAllList, {
          seller_id: localStorage.getItem("seller_id"),
          restaurant_id:this.$route.query.id
        }, (res) => {
          console.log(res);
          that.classificatList = res.data;
          that.passData(res.data);
        }, (err) => {
          console.log(err);

        }); 
      },
      passData(val){
        //触发父组件中的事件
        this.$emit('getChildData',val)
      },
      passMListClassActive (val) {
        this.$emit('getChildMListClassActive',val)
      },
      // 确定餐品新增分类
      sureAddDevide() {
        var that = this;
        // 餐品的新增分类的确定按钮
        if(that.modelType == 1 && that.foodType == 1) {
          if(that.form.name =='') {
            this.$message({
                type: 'warning',
                message: '缺少餐品分类名称'
            });
            return false
          }
          if(that.form.sort =='') {
            this.$message({
                type: 'warning',
                message: '缺少排序'
            });
            return false
          }
          // console.log('餐品的新增分类的确定按钮');
          this.$confirm('确认新增餐品分类吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            http.post(api.goodsCategoryAdd, {
              seller_id: localStorage.getItem("seller_id"),
              sort:that.form.sort,
              title:that.form.name,
              status:that.form.putaway,
              restaurant_id:that.$route.query.id,
              pid:0
            }, (res) => {
              console.log(res);
              if(res.code == 10001) {
                this.$message({
                  type: 'success',
                  message: '新增餐品分类成功!'
                });
                that.getGoodsAllList();
                that.dialogMealproduct = false;
              }
              if(res.code == 10003) {
                this.$message({
                  type: 'warning',
                  message: res.msg
                });
              }
            }, (err) => {
              console.log('网络错误');
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消新增'
            });
            that.dialogMealproduct = false;
          })
          
        }
        // 餐品的修改分类的确定按钮
        if(that.modelType == 1 && that.foodType == 2) {
          // console.log('餐品的修改分类的确定按钮');
          this.$confirm('确认修改餐品分类吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            http.post(api.goodsCategoryEdit, {
            id: that.foodTypeId,
            seller_id: localStorage.getItem("seller_id"),
            sort:that.form.sort,
            title:that.form.name,
            status:that.form.putaway,
            restaurant_id:that.$route.query.id,
            pid:0
            }, (res) => {
              console.log(res);
              if(res.code == 10001) {
                this.$message({
                  type: 'success',
                  message: '修改餐品分类成功!'
                });
                that.getGoodsAllList();
                that.dialogMealproduct = false;
              }
              
            }, (err) => {
              console.log('网络错误');
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消修改餐品分类'
            });
            that.dialogMealproduct = false;
          })
        }
      },
      // 确定餐桌新增分类
      sureAddDeskDevide() {
        var that = this;
        // 餐桌的新增分类的确定按钮
        if(that.modelType == 2 && that.foodType == 1) {
          if(that.form.name =='') {
            this.$message({
                type: 'warning',
                message: '缺少餐桌分类名称'
            });
            return false
          }
          if(that.form.sort =='') {
            this.$message({
                type: 'warning',
                message: '缺少排序'
            });
            return false
          }
          // console.log('餐zhuo的新增分类的确定按钮');
          that.$confirm('确认新增餐桌分类吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            http.post(api.deskCategoryAdd, {
            seller_id: localStorage.getItem("seller_id"),
            sort:that.form.sort,
            title:that.form.name,
            status:that.form.putaway,
            restaurant_id:that.$route.query.id,
            pid:0
            }, (res) => {
              console.log(res);
               if(res.code == 10003) {
                 that.$message({
                  type: 'warning',
                  message: res.msg
                });
               }
              if(res.code == 10001) {
                that.$message({
                  type: 'success',
                  message: '新增餐桌分类成功!'
                });
                 that.getDeskAllList();
                 that. dialogMealdesk = false;
              }
            }, (err) => {
              console.log('网络错误');
            });
          }).catch(() => {
            that.$message({
              type: 'info',
              message: '已取消新增餐桌分类'
            });
            that. dialogMealdesk = false;
          })
        }
        // 餐桌的修改分类的确定按钮
        if(that.modelType == 2 && that.foodType == 2) {
          // console.log('餐zhuo的修改分类的确定按钮');
           that.$confirm('确认修改餐桌分类吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            http.post(api.deskCategoryEdit, {
              id: that.deskTypeId,
              seller_id: localStorage.getItem("seller_id"),
              sort:that.form.sort,
              title:that.form.name,
              status:that.form.putaway,
              restaurant_id:that.$route.query.id,
              pid:0
            }, (res) => {
              console.log(res);
               if(res.code == 10001) {
                this.$message({
                  type: 'success',
                  message: '修改餐桌分类成功!'
                });
                that.getDeskAllList();
                that. dialogMealdesk = false;
               }
              
            }, (err) => {
              console.log('网络错误');
            });
          }).catch(() => {
            that.$message({
              type: 'info',
              message: '已取消修改餐桌分类'
            });
             that. dialogMealdesk = false;
          })
          
        }
      },
      // 餐品（modelType=1） 修改 （foodType=2）内的删除按钮
      deleteDevide(){
        var that = this;
        // 餐品的修改分类的删除
        if(this.modelType == 1 && this.foodType == 2) {
          //  console.log('餐品的修改分类的删除');
          this.$confirm('确认删除餐品分类吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            http.post(api.goodsCategoryDel, {
            id: that.foodTypeId
          }, (res) => {
            console.log(res);
            if(res.code == 20000) {
              this.$message({
                type: 'error',
                message: '删除失败,该菜品分类下存在菜品!'
              });
            }
            if(res.code == 10001) {
              this.$message({
                type: 'success',
                message: '删除菜品成功'
              });
              that.getGoodsAllList();
              that.passMListClassActive(0);
            }
            that.dialogMealproduct = false;
          }, (err) => {
            console.log('网络错误');
          });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除菜品分类'
            });
            that.dialogMealproduct = false;
          })
        }
      },
      // 餐桌（modelType=2） 修改 （foodType=2）内的删除按钮
      deleteDeskDevide(){
        var that = this;
        // 餐桌的修改分类的删除
        if(this.modelType == 2 && this.foodType == 2) {
          this.$confirm('确认删除餐桌分类吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            http.post(api.deskCategoryDel, {
            id: that.deskTypeId
            }, (res) => {
              // console.log(res)
              if(res.code == 20000) {
                this.$message({
                  type: 'error',
                  message: '删除失败,该餐桌分类下存在桌子!'
                });
              }
            if(res.code == 10001) {
              this.$message({
                type: 'success',
                message: '删除餐桌成功'
              });
              that.getDeskAllList();
              this.passMListClassActive(0);
            }
             that. dialogMealdesk = false;
          }, (err) => {
            console.log('网络错误');
          });
          }).catch(() => {
             this.$message({
              type: 'info',
              message: '已取消删除餐桌分类'
            });
             that. dialogMealdesk = false;
          })
          
        }
      },
      // 新增餐品模态窗
      addMeal () {
        this.dialogMealproduct = true;
        this.foodType = 1;
        // 新增的时候输入框为空
        this.form.name = '';
        this.form.sort = '';
      },
      // 修改餐品模态窗
      updataMeal (title,sort,status) {
        this.dialogMealproduct = true;
        this.foodType = 2;
        // 修改的时候输入框有值
        this.form.name = title;
        this.form.sort = sort;
        this.form.putaway = status.toString();
      },
      // 新增餐桌模态窗
      addMealdesk () {
        this.dialogMealdesk = true;
        this.foodType = 1;
        // 新增的时候输入框为空
        this.form.name = '';
        this.form.sort = '';
      },
      // 修改餐桌模态窗
      updataMealdesk (title,sort) {
        this.dialogMealdesk = true;
        this.foodType = 2;
        // 修改的时候输入框有值
        this.form.name = title;
        this.form.sort = sort;
      },
      // modelType区分新增餐桌、餐品分类的对话框
      dialogShowSmall() {
        // modelType区分餐桌、餐品的对话框,1为餐品，2为餐桌
        if (this.modelType==1)  this.addMeal();
        else this.addMealdesk();
        // 如果是餐品分类管理 并且是添加分类
        if(this.modelType == 1 && this.foodType == 1) {
          console.log('餐品的新增分类');

        }
        
      },
      // modelType区分修改餐桌、餐品分类的对话框
      dialogShowBig(id,title,sort,status) {
        if (this.modelType == 1) {
          // 弹出对话框的时候把餐品分类的id保存给删除和修改接口用
          this.foodTypeId = id ;
          this.updataMeal(title,sort,status);
        }else if(this.modelType == 2){
          this.deskTypeId = id ;
          this.updataMealdesk(title,sort);
        } 
      }
    },
    mounted () {
      if (this.modelType == 1) {
        this.getGoodsAllList();
      }else if (this.modelType == 2) {
        console.log('22222222222')
        this.getDeskAllList();
      }
      
    }
}
</script>
<style scoped>
.manage {
  /* border: 1px solid red; */
  padding: 0 25px;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.06);
}
.manage-info {
  border-bottom:1px solid #EFEFEF;
  padding: 14px 0 16px 0;
  box-sizing: border-box;
}
.manage-type {
  /* border: 1px solid pink; */
  padding: 15px 0;
}
.dish-info {
  font-size: 20px;
  padding-right: 25px;
}
.dish-add {
  color:#FF7537;
  cursor: pointer;
}
.dish-add  img{
  width:13px;
  height:13px;
  margin-right: 3px;
}
.manage-type {
  display: flex;
  flex-wrap: wrap;
}
.food-type {
  position: relative;
  /* border: 1px solid blue; */
  margin-right:25px;
}
.foot-type-list {
  display: inline-block;
  border: 1px solid #999;
  padding: 12px 21px;
  box-sizing: border-box;
  border-radius: 5px;
  font-size: 14px;
  margin: 10px 0;
}
.food-type img{
  position: absolute;
  right: -8px;
  top: 0px;
  cursor: pointer;
}
/* 按钮 */
.dialog-footer {
  /* border: 1px solid greenyellow; */
}
.btn-area {
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.make-sure {
  display: inline-block;
  border: 1px solid #FF6F2E;
  width: 200px;
  height: 40px;
  color: #FF6F2E;
  background-color: #FFF1E5; 
  border-radius: 5px;
  text-align: center;
  line-height: 40px;
}
.btn-delete {
  margin-right: 60px;
}
/* 自定义样式加deep可修改 */
/deep/.el-dialog__wrapper .el-dialog__body {
  padding: 0 0 ; 
}
/deep/.el-dialog__wrapper .el-dialog__footer {
  padding: 100px 20px 20px;
}
</style>


